<template>
  <div class="box">

        <p-button
          type="primary"
          @click="showAddModal"
          >新增</p-button
        >

      <p-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :scroll="tableScroll"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template slot="action" slot-scope="text, record, index">
          <p-popconfirm
            title="确定删除吗?"
            @confirm="handleDelete(index)"
          >
            <a>删除</a>
          </p-popconfirm>
        </template>


      </p-table>





    <ProductionDepartmentModal ref='productionDepartmentModal' @handleSuccess = 'handleSuccess'></ProductionDepartmentModal>

  </div>
</template>

<script type="text/javascript">
import RenderTable from '@/components/renderTable'
import ProductionDepartmentModal from './productionDepartmentModal.vue'
import { timestampToDatetime } from "@/utils/util";

export default {
  data() {
    return {
      columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 60,
          align: "center",
          customRender: (t, r, index) => {
            return parseInt(index) + 1;
          },
        },

        {
          title: "员工编号",
          align: "center",
          dataIndex: "empno",
        },
        {
          title: "员工姓名",
          align: "center",
          dataIndex: "empname",
        },
        {
          title: "线体",
          align: "center",
          dataIndex: "linename",
        },
        {
          title: "班组",
          align: "center",
          dataIndex: "classname",        
        },
        {
          title: "性别",
          align: "center",
          dataIndex: "empsex",        
        },
        {
          title: "岗位",
          align: "center",
          dataIndex: "duty",        
        },
        {
          title: "技能",
          align: "center",
          width: "300px",
          dataIndex: "skills",  
        },       
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      loading: false,
      dataSource: [],
      url: {
        list: '/mes-manpower/mesHrScMake/list',
        delete: '/mes-manpower/mesHrLineSkill/',
      },
      selectedId: '',
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },         
    }
  },
  computed: {
    tableScroll() {
      if (this.columns.length > 13) {
        return { x: this.columns.length * 150 - 450 };
      }
    },
  },  
  mounted() {
  }, 
  methods: {


    handleEdit(record){
      this.$refs.productionDepartmentModal.showModal(record)
    },
    // 显示新增弹窗
    showAddModal(){
      this.$refs.productionDepartmentModal.showModal()
    },
    handleSuccess(selectionRows){
      const idArr = this.dataSource.map(ele => ele.id)
      const arr = selectionRows.filter(ele => ! idArr.includes(ele.id))
      this.dataSource.push(...arr)
      console.log(this.dataSource);
      
    },

    // 删除
    handleDelete(index){
      this.dataSource.splice(index, 1)
    },


    // 选择table
    onSelectChange(selectionRows){
      console.log(selectionRows);
      this.selectedId = selectionRows[0].id
    }    
  },
  components: {
    RenderTable,
    ProductionDepartmentModal,
  }
}
</script>

<style lang="less" scoped>
</style>

